<template>
  <el-form label-width="100px" size="small">
    <el-row gutter="40">
      <el-col :span="8">
        <el-form-item label="流程编号：" style="width: 100%;">
          {{detailData.processNo}}
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="创建时间：" style="width: 100%;">
          {{ dateFormat('yyyy-mm-dd HH:MM',detailData.startTime) }}
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="创建人：" style="width: 100%;">
          {{ detailData.initiator }}
        </el-form-item>
      </el-col>
    </el-row>
    <el-row gutter="40" v-if="detailData?.data?.agentType === 'agent' || detailData?.data?.New?.agentType === 'agent' ">
      <el-col :span="24" style="padding-left: 0;padding-right: 0">
        <item-title title="基本信息" />
      </el-col>
      <el-col :span="8">
        <el-form-item label="代理商编号：">
          <span>{{detailData.data?.agentNumber}}</span>
          <span> {{detailData.data?.New?.agentNumber}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="代理商名称：">
          <span>{{detailData.data?.agentName}}</span>
          <span> {{detailData.data?.New?.agentName}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="统一社会信用码：" label-width="140px">
          <span>{{detailData.data?.creditCode}}</span>
          <span>{{detailData.data?.New?.creditCode}}</span>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="详细地址：">
          <span>{{detailData.data?.address}}</span>
          <span>{{detailData.data?.New?.address}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="联系人：">
          <span>{{detailData.data?.userName}}</span>
          <span>{{detailData.data?.New?.userName}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="企业所在地区：" label-width="140px">
          <span
            v-if="detailData.data.provinceName">{{detailData.data.provinceName}}/{{detailData.data.cityName}}/{{detailData.data.areaName}}
          </span>
          <span v-if="detailData.data.New?.provinceName">
            {{detailData.data.New?.provinceName}}/{{detailData.data.New?.cityName}}/{{detailData.data.New?.areaName}}
          </span>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="联系电话：">
          <span>{{detailData.data?.tel}}</span>
          <span>{{detailData.data?.New?.tel}}</span>
        </el-form-item>
      </el-col>

    </el-row>
    <el-row gutter="40" v-else>
      <el-col :span="24" style="padding-left: 0;padding-right: 0">
        <item-title title="基本信息" />
      </el-col>
      <el-col :span="8">
        <el-form-item label="编号：">
          <span>{{detailData.data?.agentNumber}}</span>
          <span>{{detailData.data?.New?.agentNumber}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="兼职名称：">
          <span>{{detailData.data?.userName}}</span>
          <span>{{detailData.data?.New?.userName}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="性别：">
          <span v-if="detailData.data?.sex === '1'">男</span>
          <span v-if="detailData.data?.sex === '2'">女</span>
          <span v-if="detailData.data?.New?.sex === '1'">男</span>
          <span v-if="detailData.data?.New?.sex === '2'">女</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="详细地址：">
          <span>{{detailData.data?.address}}</span>
          <span>{{detailData.data?.New?.address}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="联系电话：">
          <span>{{detailData.data?.tel}}</span>
          <span>{{detailData.data?.New?.tel}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="身份证：">
          <span>{{detailData.data?.cardNumber}}</span>
          <span>{{detailData.data?.New?.cardNumber}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="创建人：">
          <span>{{detailData.data?.creatorName}}</span>
          <span>{{detailData.data?.New?.creatorName}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="创建时间：">
          <span v-if="detailData.data?.createdAt">
            {{dateFormat("yyyy-mm-dd HH:MM:SS",detailData.data?.createdAt)}}</span>
          <span v-if="detailData.data?.New?.createdAt">
            {{dateFormat("yyyy-mm-dd HH:MM:SS",detailData.data?.New?.createdAt)}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="身份证附件：">
          <div v-for="(item,index) in detailData.data?.cardFiles" :key="index" class="file-item">
            <image-upload-view disabled="true" :data="item" />
          </div>
          <div v-for="(item,index) in detailData.data?.New?.cardFiles" :key="index" class="file-item">
            <image-upload-view disabled="true" :data="item" />
          </div>
        </el-form-item>
      </el-col>

    </el-row>
  </el-form>
</template>

<script>
import { reactive, toRefs, watch } from "vue";

export default {
  name: "index",
  props: {
    detailData: {
      type: Object,
      default() {
        return {
          data: {},
        };
      },
    },
  },
  setup(props) {
    var data = reactive({
      detailData: {data:{}},
    });
    watch(
      () => props.detailData,
      (newval, oldval) => {
        if (newval) {
          data.detailData = newval;
          console.log(newval);
        }
      },
      { immediate: true, deep: true }
    );
    return {
      ...toRefs(data),
    };
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
